
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: ScrollView: ScrollView Paginator Plugin</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>

</head>
<body id="yahoo-com" class="yui3-skin-sam  yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
			<input name="vs" type="hidden" value="yuilibrary.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN, YUILibrary &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: ScrollView: ScrollView Paginator Plugin</h1></div>
</div>
<div id="bd">


	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example" id="main">

	<h2>ScrollView: ScrollView Paginator Plugin</h2>

	<div id="example" class="promo">
	<div class="example-intro">
	<p>This example shows how to create a ScrollView widget with pagination support, using the ScrollViewPaginator plugin.</p>	</div>

	<div class="module example-container  newWindow">
			<div id="example-canvas" class="bd">

		<p class="newWindowButton yui-skin-sam">
        <span id="newWindowLink">
            <span class="first-child">
                <a href="scrollview-paging_source.html" target="_blank">View example in new window.</a>
            </span>
        </span>
    </p>

	
		</div>
	</div>
	</div>

	<h2>ScrollView with Pagination Support</h2>

<p>In this example, we'll create a ScrollView instance which has pagination support enabled. This allows the ScrollView to scroll between discrete page boundaries in the content, as opposed to continuous scrolling. Pagination is only supported for horizontal ScrollViews currently.</p>

<h3>Modules Used</h3>

<p>For this example, since we want both pagination and scrollbar indicator support enabled, we use the <code>scrollview</code> module as we did for the <a href="scrollview-horiz.html">Horizontal ScrollView</a> example to get the base ScrollView with scrollbar support.</p>

<p>Additionally we pull down the <code>scrollview-paginator</code> module, which provides the <code>ScrollViewPaginator</code> plugin:</p>

<div id="syntax-97e08e9016496c6254b73ac095b3d00e" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="co1">// Pull in the scrollview widget, and the paginator plugin</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">'scrollview'</span><span class="sy0">,</span> <span class="st0">'scrollview-paginator'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">    ...</div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">&nbsp;
<span class="co1">// Pull in the scrollview widget, and the paginator plugin</span>
&nbsp;
YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">'scrollview'</span><span class="sy0">,</span> <span class="st0">'scrollview-paginator'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    ...
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;</pre></div><textarea id="syntax-97e08e9016496c6254b73ac095b3d00e-plain">
// Pull in the scrollview widget, and the paginator plugin

YUI().use('scrollview', 'scrollview-paginator', function(Y) {
    ...
});
</textarea></div>
<h3>Instantiating The ScrollView Widget</h3>

<p>As with the <a href="scrollview-horiz.html">Horizontal ScrollView</a> example, we provide the markup for the ScrollView content on the page, as shown below:</p>

<div id="syntax-dfca65110d8c0c8e0b91c6e69cda61e2" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sy0">&lt;!--</span> Content <span class="kw1">with</span> a width which would require scrolling <span class="sy0">--&gt;</span></div></li><li class="li1"><div class="de1"><span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;scrollview-content&quot;</span> style<span class="sy0">=</span><span class="st0">&quot;&quot;</span> <span class="kw2">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-scrollview-loading&quot;</span><span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sy0">&lt;</span>ul<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sy0">&lt;</span>li<span class="sy0">&gt;&lt;</span>img src<span class="sy0">=</span><span class="st0">&quot;...&quot;</span><span class="sy0">&gt;&lt;/</span>li<span class="sy0">&gt;</span></div></li><li class="li2"><div class="de2">        <span class="sy0">&lt;</span>li<span class="sy0">&gt;&lt;</span>img src<span class="sy0">=</span><span class="st0">&quot;...&quot;</span><span class="sy0">&gt;&lt;/</span>li<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sy0">&lt;</span>li<span class="sy0">&gt;&lt;</span>img src<span class="sy0">=</span><span class="st0">&quot;...&quot;</span><span class="sy0">&gt;&lt;/</span>li<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sy0">&lt;</span>li<span class="sy0">&gt;&lt;</span>img src<span class="sy0">=</span><span class="st0">&quot;...&quot;</span><span class="sy0">&gt;&lt;/</span>li<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sy0">&lt;/</span>ul<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1"><span class="sy0">&lt;/</span>div<span class="sy0">&gt;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="sy0">&lt;!--</span> Content <span class="kw1">with</span> a width which would require scrolling <span class="sy0">--&gt;</span>
<span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;scrollview-content&quot;</span> style<span class="sy0">=</span><span class="st0">&quot;&quot;</span> <span class="kw2">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-scrollview-loading&quot;</span><span class="sy0">&gt;</span>
    <span class="sy0">&lt;</span>ul<span class="sy0">&gt;</span>
        <span class="sy0">&lt;</span>li<span class="sy0">&gt;&lt;</span>img src<span class="sy0">=</span><span class="st0">&quot;...&quot;</span><span class="sy0">&gt;&lt;/</span>li<span class="sy0">&gt;</span>
        <span class="sy0">&lt;</span>li<span class="sy0">&gt;&lt;</span>img src<span class="sy0">=</span><span class="st0">&quot;...&quot;</span><span class="sy0">&gt;&lt;/</span>li<span class="sy0">&gt;</span>
        <span class="sy0">&lt;</span>li<span class="sy0">&gt;&lt;</span>img src<span class="sy0">=</span><span class="st0">&quot;...&quot;</span><span class="sy0">&gt;&lt;/</span>li<span class="sy0">&gt;</span>
        <span class="sy0">&lt;</span>li<span class="sy0">&gt;&lt;</span>img src<span class="sy0">=</span><span class="st0">&quot;...&quot;</span><span class="sy0">&gt;&lt;/</span>li<span class="sy0">&gt;</span>
    <span class="sy0">&lt;/</span>ul<span class="sy0">&gt;</span>
<span class="sy0">&lt;/</span>div<span class="sy0">&gt;</span></pre></div><textarea id="syntax-dfca65110d8c0c8e0b91c6e69cda61e2-plain"><!-- Content with a width which would require scrolling -->
<div id="scrollview-content" style="" class="yui3-scrollview-loading">
    <ul>
        <li><img src="..."></li>
        <li><img src="..."></li>
        <li><img src="..."></li>
        <li><img src="..."></li>
    </ul>
</div></textarea></div>
<p>And we instantiate the ScrollView instance in the same way, by providing a fixed width for the widget, and constraining flicks to the "x" axis:</p> 

<div id="syntax-f59e8cc788350a8acdf0b6dd92e44812" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// Constraining the width, instead of the height for horizontal scrolling</span></div></li><li class="li1"><div class="de1"><span class="kw2">var</span> scrollView <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">ScrollView</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    id<span class="sy0">:</span> <span class="st0">'#scrollview'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    srcNode<span class="sy0">:</span> <span class="st0">'#scrollview-content'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">    width <span class="sy0">:</span> <span class="nu0">320</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    flick<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        minDistance<span class="sy0">:</span><span class="nu0">10</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        minVelocity<span class="sy0">:</span><span class="nu0">0.3</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        axis<span class="sy0">:</span> <span class="st0">&quot;x&quot;</span></div></li><li class="li2"><div class="de2">    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// Constraining the width, instead of the height for horizontal scrolling</span>
<span class="kw2">var</span> scrollView <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">ScrollView</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
    id<span class="sy0">:</span> <span class="st0">'#scrollview'</span><span class="sy0">,</span>
    srcNode<span class="sy0">:</span> <span class="st0">'#scrollview-content'</span><span class="sy0">,</span>
    width <span class="sy0">:</span> <span class="nu0">320</span><span class="sy0">,</span>
    flick<span class="sy0">:</span> <span class="br0">&#123;</span>
        minDistance<span class="sy0">:</span><span class="nu0">10</span><span class="sy0">,</span>
        minVelocity<span class="sy0">:</span><span class="nu0">0.3</span><span class="sy0">,</span>
        axis<span class="sy0">:</span> <span class="st0">&quot;x&quot;</span>
    <span class="br0">&#125;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-f59e8cc788350a8acdf0b6dd92e44812-plain">// Constraining the width, instead of the height for horizontal scrolling
var scrollView = new Y.ScrollView({
    id: '#scrollview',
    srcNode: '#scrollview-content',
    width : 320,
    flick: {
        minDistance:10,
        minVelocity:0.3,
        axis: "x"
    }
});</textarea></div>
<p>As we did in the Horizontal ScrollView example, we add CSS which switches the LIs to layout horizontally:</p>

<div id="syntax-ce3b97a1815c27a9ab3550c0fda917c0" class="yui-syntax-highlight"><div class="numbers"><pre class="css" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="coMULTI">/* To layout horizontal LIs */</span></div></li><li class="li1"><div class="de1"><span class="re0">#scrollview-content</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">white-space</span><span class="sy0">:</span><span class="kw2">nowrap</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="re0">#scrollview-content</span> li <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">display</span><span class="re2">:inline-</span>block<span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#fff</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="coMULTI">/* For IE 6/7 - needs inline block hack (and the background color mentioned above) */</span></div></li><li class="li1"><div class="de1"><span class="re0">#scrollview-content</span> li <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="sy0">*</span><span class="kw1">display</span><span class="sy0">:</span><span class="kw2">inline</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="sy0">*</span>zoom<span class="sy0">:</span><span class="nu0">1</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="css" style="font-family:monospace;"><span class="coMULTI">/* To layout horizontal LIs */</span>
<span class="re0">#scrollview-content</span> <span class="br0">&#123;</span>
    <span class="kw1">white-space</span><span class="sy0">:</span><span class="kw2">nowrap</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="re0">#scrollview-content</span> li <span class="br0">&#123;</span>
    <span class="kw1">display</span><span class="re2">:inline-</span>block<span class="sy0">;</span>
    <span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#fff</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="coMULTI">/* For IE 6/7 - needs inline block hack (and the background color mentioned above) */</span>
<span class="re0">#scrollview-content</span> li <span class="br0">&#123;</span>
    <span class="sy0">*</span><span class="kw1">display</span><span class="sy0">:</span><span class="kw2">inline</span><span class="sy0">;</span>
    <span class="sy0">*</span>zoom<span class="sy0">:</span><span class="nu0">1</span><span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div><textarea id="syntax-ce3b97a1815c27a9ab3550c0fda917c0-plain">/* To layout horizontal LIs */
#scrollview-content {
    white-space:nowrap;
}

#scrollview-content li {
    display:inline-block;
    background-color:#fff;
}

/* For IE 6/7 - needs inline block hack (and the background color mentioned above) */
#scrollview-content li {
    *display:inline;
    *zoom:1;
}</textarea></div>
<p>This gives us a ScrollView instance with scrollbar indicator support. However it doesn't have pagination support available yet.</p>

<h3>Plugging In Pagination Support</h3>

<p>To add pagination support to the ScrollView instance, we plug in the <code>ScrollViewPaginator</code> plugin, providing the <code>selector</code> attribute configuration argument to it. The <code>selector</code> tells
the paginator which list of elements inside the ScrollView content box define page boundaries at which the ScrollView should stop when scrolling. For this example, each LI defines a ScrollView page:</p>

<div id="syntax-05eb18310bc6e7fc3cc91e93ea1898dd" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">scrollView.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">ScrollViewPaginator</span><span class="sy0">,</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    selector<span class="sy0">:</span> <span class="st0">'li'</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">scrollView.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">ScrollViewPaginator</span><span class="sy0">,</span> <span class="br0">&#123;</span>
    selector<span class="sy0">:</span> <span class="st0">'li'</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-05eb18310bc6e7fc3cc91e93ea1898dd-plain">scrollView.plug(Y.Plugin.ScrollViewPaginator, {
    selector: 'li'
});</textarea></div>
<p>The ScrollView now has pagination support activated, and will stop at page boundaries when the user flicks the content, or drags the content past the halfway point of the current page.</p>

<h3>Accessing The Paginator Plugin API</h3>

<p>Similar to the ScrollBar indicator plugin, the ScrollBarPaginator API is now available on the ScrollView instance, on the namespace defined by the plugin, which is <code>scrollView.pages</code>. 
The <code>pages</code> property can be used to manage the page state of the ScrollView, as shown below:</p>

<div id="syntax-1fcff7e0951490108624e68018038cd3" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#scrollview-next'</span><span class="br0">&#41;</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> Y.<span class="me1">bind</span><span class="br0">&#40;</span>scrollView.<span class="me1">pages</span>.<span class="me1">next</span><span class="sy0">,</span> scrollView.<span class="me1">pages</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#scrollview-prev'</span><span class="br0">&#41;</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> Y.<span class="me1">bind</span><span class="br0">&#40;</span>scrollView.<span class="me1">pages</span>.<span class="me1">prev</span><span class="sy0">,</span> scrollView.<span class="me1">pages</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#scrollview-next'</span><span class="br0">&#41;</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> Y.<span class="me1">bind</span><span class="br0">&#40;</span>scrollView.<span class="me1">pages</span>.<span class="me1">next</span><span class="sy0">,</span> scrollView.<span class="me1">pages</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span>
Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#scrollview-prev'</span><span class="br0">&#41;</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> Y.<span class="me1">bind</span><span class="br0">&#40;</span>scrollView.<span class="me1">pages</span>.<span class="me1">prev</span><span class="sy0">,</span> scrollView.<span class="me1">pages</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-1fcff7e0951490108624e68018038cd3-plain">Y.one('#scrollview-next').on('click', Y.bind(scrollView.pages.next, scrollView.pages));
Y.one('#scrollview-prev').on('click', Y.bind(scrollView.pages.prev, scrollView.pages));</textarea></div>
<p>The above code calls the plugin's <code>next()</code> and <code>prev()</code> methods when the respective button is clicked. The <a href="http://developer.yahoo.com/yui/3/scrollview/index.html#paginator">ScrollView Paginator</a> documentation provides additional examples of the API available through the <code>pages</code> property.</p>

<h3>Setting Up A Click Listener On the Content</h3>

<p>For this example, we also set up a click listener on the images. For touch devices, the click event does not fire when dragging or flicking, so there's no special handling required when setting up a click listener. However to also support mouse based devices, we need to distinguish between a click and drag or flick. In order to do this we set up a check in our click listener, to make sure we only respond to the click if the ScrollView wasn't dragged, by checking the <code>lastScrolledAmt</code> property, which is reset whenever a drag/flick gesture ends:</p>

<div id="syntax-8a47b8ce1743e1b28216b99670dbf1e1" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">&quot;#scrollview-content&quot;</span><span class="br0">&#41;</span>.<span class="me1">delegate</span><span class="br0">&#40;</span><span class="st0">&quot;click&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="co1">// For mouse based devices, we need to make sure the click isn't fired</span></div></li><li class="li1"><div class="de1">    <span class="co1">// and the end of a drag/scroll. We use 2 as an arbitrary threshold.</span></div></li><li class="li1"><div class="de1">    <span class="kw1">if</span> <span class="br0">&#40;</span>Math.<span class="me1">abs</span><span class="br0">&#40;</span>scrollView.<span class="me1">lastScrolledAmt</span><span class="br0">&#41;</span> <span class="sy0">&lt;</span> <span class="nu0">2</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        <span class="kw3">alert</span><span class="br0">&#40;</span>e.<span class="me1">currentTarget</span>.<span class="me1">getAttribute</span><span class="br0">&#40;</span><span class="st0">&quot;alt&quot;</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="sy0">,</span> <span class="st0">&quot;img&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">&quot;#scrollview-content&quot;</span><span class="br0">&#41;</span>.<span class="me1">delegate</span><span class="br0">&#40;</span><span class="st0">&quot;click&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="co1">// For mouse based devices, we need to make sure the click isn't fired</span>
    <span class="co1">// and the end of a drag/scroll. We use 2 as an arbitrary threshold.</span>
    <span class="kw1">if</span> <span class="br0">&#40;</span>Math.<span class="me1">abs</span><span class="br0">&#40;</span>scrollView.<span class="me1">lastScrolledAmt</span><span class="br0">&#41;</span> <span class="sy0">&lt;</span> <span class="nu0">2</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw3">alert</span><span class="br0">&#40;</span>e.<span class="me1">currentTarget</span>.<span class="me1">getAttribute</span><span class="br0">&#40;</span><span class="st0">&quot;alt&quot;</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span>
<span class="br0">&#125;</span><span class="sy0">,</span> <span class="st0">&quot;img&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-8a47b8ce1743e1b28216b99670dbf1e1-plain">Y.one("#scrollview-content").delegate("click", function(e) {
    // For mouse based devices, we need to make sure the click isn't fired
    // and the end of a drag/scroll. We use 2 as an arbitrary threshold.
    if (Math.abs(scrollView.lastScrolledAmt) < 2) {
        alert(e.currentTarget.getAttribute("alt"));
    }
}, "img");</textarea></div>
<h3>Preventing Native Behavior For Content</h3>

<p>As with the Horizontal ScrollView example, since we have images which act as drag/flick targets, we need to stop the default image drag/drop behavior in certain browsers (for example gecko and IE), by preventing default on the underlying mousedown event. If we don't prevent default, the image will be natively draggable by default, and interfere with scrolling:</p>

<div id="syntax-0dc345d28b4792469521de60009719cf" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// Prevent the image from being natively dragged</span></div></li><li class="li1"><div class="de1">content.<span class="me1">delegate</span><span class="br0">&#40;</span><span class="st0">&quot;mousedown&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    e.<span class="me1">preventDefault</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="sy0">,</span> <span class="st0">&quot;img&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// Prevent the image from being natively dragged</span>
content.<span class="me1">delegate</span><span class="br0">&#40;</span><span class="st0">&quot;mousedown&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    e.<span class="me1">preventDefault</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="sy0">,</span> <span class="st0">&quot;img&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-0dc345d28b4792469521de60009719cf-plain">// Prevent the image from being natively dragged
content.delegate("mousedown", function(e) {
    e.preventDefault();
}, "img");</textarea></div>
				</div>
				<div class="yui-u sidebar">
	
					<div id="examples" class="mod box4">
                        <div class="hd">
						<h4>
    ScrollView Examples:</h4>
                        </div>
						<div class="bd">
							<ul>
								<li><a href='../scrollview/scrollview-base.html'>Basic ScrollView Without a Scroll Indicator</a></li><li><a href='../scrollview/scrollview.html'>ScrollView with Scroll Indicator and Link Suppression Behavior.</a></li><li><a href='../scrollview/scrollview-horiz.html'>Horizontal ScrollView</a></li><li class='selected'><a href='../scrollview/scrollview-paging.html'>ScrollView Paginator Plugin</a></li>							</ul>
						</div>
					</div>

					<div class="mod box4">
                        <div class="hd">
						<h4>More ScrollView Resources:</h4>
                        </div>
                        <div class="bd">
						<ul>
							<!-- <li><a href="http://developer.yahoo.com/yui/scrollview/">User's Guide</a> (external)</li> -->
<li><a href="../../api/module_scrollview.html">API Documentation</a></li></ul>
                        </div>
					</div>
			  </div>
		</div>

		</div>
	</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator/index.html">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="History - Functional Examples" href="../../examples/history/index.html">History <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="Internationalization - Functional Examples" href="../../examples/intl/index.html">Internationalization</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="JSONP (JSON with Padding) - Functional Examples" href="../../examples/jsonp/index.html">JSONP <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Recordset - Functional Examples" href="../../examples/recordset/index.html">Recordset <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Resize - Functional Examples" href="../../examples/resize/index.html">Resize <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Sortable - Functional Examples" href="../../examples/sortable/index.html">Sortable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="item"><a title="Transition - Functional Examples" href="../../examples/transition/index.html">Transition <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Uploader - Functional Examples" href="../../examples/uploader/index.html">Uploader <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YQL Query - Functional Examples" href="../../examples/yql/index.html">YQL Query <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="AutoComplete - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Charts - Functional Examples" href="../../examples/charts/index.html">Charts <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataTable - Functional Examples" href="../../examples/datatable/index.html">DataTable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Dial - Functional Examples" href="../../examples/dial/index.html">Dial <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Editor - Functional Examples" href="../../examples/editor/index.html">Editor <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="selected "><a title="ScrollView - Functional Examples" href="../../examples/scrollview/index.html">ScrollView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="TabView - Functional Examples" href="../../examples/tabview/index.html">TabView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Grids - Functional Examples" href="../../examples/cssgrids/index.html">CSS Grids <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2011 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script language="javascript"> 
var yuiConfig = { filter: 'raw' };
</script>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
</body>
</html>
